<template>
  <div class="demo-pagination-block">
    <el-pagination
        :current-page="pageConfig.page"
        :page-size="pageConfig.pageSize"
        :page-sizes="[3,10, 20, 30, 40]"
        :small="pageConfig.small"
        :disabled="pageConfig.disabled"
        :background="pageConfig.background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageConfig.total"
        next-text="下一页"
        prev-text="上一页"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  name: "CommPage",
  props: {
    pageConfig: {
      type: Object,
      default: () => {
        return {
          /*当前页数*/
          page: 1,
          pageSize: 10,
          /*是否使用小型分页样式	boolean*/
          small: false,
          /*disabled	是否禁用分页	boolean false*/
          disabled: false,
          /*background	是否为分页按钮添加背景色	boolean false*/
          background: true,
          /*total 总条数*/
          total: 100,
        }
      }
    },
  },
  methods: {
    /*current-page 改变时触发*/
    handleCurrentChange() {
      console.log(`current page:` + this.pageConfig.page)
    },
    /*page-size 改变时触发*/
    handleSizeChange() {
      console.log(`handleSizeChange:` + this.pageConfig.pageSize)
    }
  }
}
</script>

<style scoped>

</style>
